<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>属性绑定</h2>
    <!-- 当标签的属性需要使用变量或者表达式的时候 -->
    <!-- 不是用双大括号了，而是用v-bind的指令 -->

    <!-- 当一个属性前面加上了v-bind。那么引号里面自动就变量或者表达式了 -->
    <img v-bind:src="url" alt="" />
    <!-- 因为v-bind会用的很多，所以可以简写成: -->
    <img :src="url" alt="" />
    <div v-bind:id="'box' + count"></div>

    <!-- 像一些disabled的属性，可以允许后面的值为布尔值 -->
    <!-- 来决定是否要添加这个属性 -->
    <input type="text" :disabled="disabled" />
  </div>

  <script src="../vue3.js"></script>
  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          url: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
          count: 1,
          disabled: false
        }
      }
    }).mount("#app");
  </script>
</body>
</html>